<template>
	<view class="app-container">
	<!-- 	<view class="top-title">
			<text>Hi球球,今日为你推荐</text>
		</view> -->
		<u-row gutter="50">
			<u-col span="6">
				<!-- 今日推荐 -->
				<Recommend />
			</u-col>
			<u-col span="6">
				<!-- 精选歌单 -->
				<SongSheet />
			</u-col>
		</u-row>
		<u-row>
			<u-col span="12">
				<HotSinger />
			</u-col>
		</u-row>
		<u-row>
			<u-col span="12">
				<Ranking />
			</u-col>
		</u-row>
		<view class="playControl">
			<PlayControl />
		</view>
		<view class="tool-bar">
			<u-icon class="icon" name="search" size="40" @click="goSearchPage"></u-icon>
			<u-icon class="icon" name="account-fill" @click="goUserCenter" size="40"></u-icon>
		</view>
	</view>
</template>

<script>
	import Recommend from './components/recommend'
	import SongSheet from './components/songSheet/index.vue'
	import PlayControl from './components/playControler'
	import HotSinger from './components/hotSinger'
	import Ranking from './components/ranking'

	export default {
		components: {
			Recommend,
			SongSheet,
			PlayControl,
			HotSinger,
			Ranking
		},
		data() {
			return {

			};
		},
		onLoad() {
			console.log('13211')
		},
		methods: {
			goUserCenter() {
				uni.navigateTo({
					url: '/pages/music/userCenter'
				})
			},
			goSearchPage() {
				uni.navigateTo({
					url: '/pages/music/search'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-row{
		align-items: inherit!important;
	}
	
	
	.uni-scroll-view,
	.uni-scroll-view-content {
		width: 400px !important;
	}

	.app-container {
		position: relative;
		background-color: #fff;

		.tool-bar {
			position: absolute;
			top: 26px;
			right: 40px;

			// background-color: pink;
			.icon {
				cursor: pointer;
				margin-left: 15px;
				font-size: 30px;
				background-color: #efefef;
				padding: 10px;
				border-radius: 4px;
				color: #999;
			}
		}
	}
</style>
